<template>
  <div class="content" @click="send">
    <div></div>
    <div class="name">{{ name }}</div>
    <!-- <div class="dan">{{dan}}</div> -->
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String
    },
  },
  data() {
    return {
      dan: "co2/t"
    }
  },
  methods: {
    send() {
      console.log("sending..")
      this.$emit("clickt", this.name)
    }
  }
}
</script>

<style scoped>
.content {
  z-index: 10;
  display: flex;
  position: relative;
  background-color: #fff;
  min-height: 60px;
  width: 90%;
  text-align: center;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
  cursor: pointer;
  padding: 20px;
}

/* .content:hover{
    z-index: 10;
    background-color: #fff ;
    min-height: 60px;
    width: 90%;
    text-align: center;
    margin: 0 auto;
    box-shadow: 0 0 16px 0 rgb(106 184 157 / 60%);
    cursor: pointer;
    padding:20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size:18px;
  } */
.dan {
  position: absolute;
  right: 10px;
}
</style>
